<template>
    <div class="box">
          // 未登录状态
          <div class="not-login" v-if="!$store.state.users.token">
            <div @click="$router.push('/login')">
              <!-- <van-icon name="graphic" size="50" color="#F8F8F8"/> -->
              <img src="@/assets/mobile.png" style="width: 60px" />
              <p>立即登陆</p>
            </div>
          </div>
            <!-- 未登录的状态 -->
    <!-- 登录的状态 -->
    <div class="login" v-else>
      <!-- 头部嘻嘻你 -->
      <div class="login-head">
        <div class="login-head-left">
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <span>小灰灰</span>
        </div>
        <van-button size="mini" round>编辑资料</van-button>
      </div>
      <van-row>
        <van-col :span="6">
          <p>100</p>
          <p>关注</p>
        </van-col>
        <van-col :span="6">
          <p>100</p>
          <p>头条</p>
        </van-col>
        <van-col :span="6">
          <p>100</p>
          <p>粉丝数</p>
        </van-col>
        <van-col :span="6">
          <p>100</p>
          <p>获赞</p>
        </van-col>
      </van-row>
    </div>
    <!-- 登录的状态 -->
    <!-- 九宫格内容 -->
    <van-grid clickable :column-num="2">
      <van-grid-item icon="star-o" text="收藏" to="/" />
      <van-grid-item icon="clock-o" text="历史" url="/vant/mobile.html" />
    </van-grid>

    <!-- 单元格导航 -->
    <van-cell-group v-show="$store.state.users.token">
      <van-cell title="消息通知" is-link />
      <van-cell title="实名认证" is-link/>
      <van-cell title="用户反馈" is-link/>
      <van-cell title="系统设置" is-link/>
    </van-cell-group>
    <van-cell-group>
       <van-cell title="小智同学" is-link/>
    </van-cell-group>
    <van-cell-group v-show="$store.state.users.token">
      <van-cell title="退出登陆" is-link  @click="logout"/>
    </van-cell-group>
    </div>
</template>
<script>

export default {
  
    
}
</script>
<style lang="scss">
  .box {
    width: 100%;
    background: #dfdfdf;
    font-size: 16px;
    min-height: 500px;
    padding-bottom: 10px;
  
    .not-login {
      width: 100%;
      height: 200px;
      background: #3196fa;
      color: #f8f8f8;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .login {
      width: 100%;
      height: 200px;
      background: #3196fa;
      color: #f8f8f8;
      .login-head {
        display: flex;
        width: 100%;
        padding: 10px;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;
        .login-head-left {
          display: flex;
          align-items: center;
          span {
            padding-left: 5px;
          }
        }
      }
      .van-row {
        margin-top: 15px;
        .van-col {
          text-align: center;
        }
      }
    }
    .van-cell-group {
      margin-top: 10px;
    }
  }
</style>